<template>
  <div class="app-container">
    <div class="main-msg" v-if="form">
      <div class="title">{{form.msgTitle}}</div>
      <div class="time">{{formatDate(form.createTime)}}</div>
      <div class="tabs">
        <div class="item">公司名称：{{form.companyName}}</div>
        <div class="item">接收用户类型：
          
          <span v-if="form.businessType==5">系统消息</span>
          <span v-else-if="form.businessType==10">箱东消息</span>
          <span v-else-if="form.businessType==15">货代消息</span>
          <span v-else-if="form.businessType==20">箱贸易消息</span>
          <span v-else-if="form.businessType==25">车队消息</span>
        </div>
       </div>
      <div class="centen" v-html="form.msgContent"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted,onActivated } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { getDetailsById ,setRead} from '@/api/sysMessag/index'
import { formatDate } from '@/utils'
import useUserStore from '@/store/modules/user';
import { useRoute } from 'vue-router'
const route = useRoute();
const form=ref()
const userInfo=ref({})

onActivated(() => {
  getRoleDetail(route.query.id) 
    userInfo.value = useUserStore().getUser()
  if(userInfo.value.userType!=1){
     getsetRead(route.query.id)
  }
})
//详情查询
const getRoleDetail=(id)=>{
  getDetailsById(id).then(res => {
    form.value=res.data
  })
}
//状态已读
const getsetRead=(id)=>{
  let ids=[]
  ids.push(id)
  setRead(ids).then(res => {
  })
}
</script>
<style>
.title{
  text-align: center;
  font-weight: bold;
}
.time{
  color: #666;
  text-align: center;
  margin-top: 10px;
}
.tabs{
  display: flex;
  margin: 20px 0;
}
.item{
  margin-right: 50px;
}
.centen{
  line-height: 30px;
}
</style>